import React, { Component } from 'react';
import { TextField } from 'office-ui-fabric-react';

class FieldSet extends Component {

   
  renderFields = fields =>
    fields.map((field,index) => (
          <div className="ms-Grid-col ms-sm6 ms-md3" key={index}>
        <TextField {...field} underlined  />
      </div>
    ));

  render() {
    const { fields } = this.props;

    return (
      <div className="ms-Grid">
        <div className="ms-Grid-row">{this.renderFields(fields)}</div>
      </div>
    );
  }
}

// const LayoutMode = { horizontal: 'horizontal', vertical: 'vertical' };

FieldSet.defaultProps = {
  columns: 4,
  fields: []
};

export default FieldSet;
